<template>
  <div class="author">
    <div class="avatar">
      <img
        :src="user.avatar"
        style="width: 50px; height: 50px; border-radius: 50%"
        @click.stop="
          $router.push({
            path: `/user/profile/${user.id}`,
            target: '_blank',
          })
        "
      />
    </div>
    <div class="desc">
      <div class="name">{{ user.name }}</div>
      <div class="info">{{ user.desc }}</div>
    </div>
    <div
      class="follow"
      @click="followChange"
      v-if="user.id !== store.userInfo.id"
    >
      <span>{{ user.follow ? "取消关注" : "+ 关注" }}</span>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { followUser, unfollowUser } from "@/api/users.js";
import { getUserProfile } from "@/api/users.js";
import { useUserStore } from "@/stores/userStore";
const store = useUserStore();
const user = ref({
  id: "",
  name: "",
  avatar: "",
  desc: "",
  follow: false,
});
const props = defineProps({
  userId: {
    type: String,
    required: true,
  },
});

const getData = async () => {
  getUserProfile({
    userId: props.userId,
    currentUserId: useUserStore().userInfo.id,
  }).then((res) => {
    user.value = res.data.data;
  });
};

const followChange = () => {
  if (user.value.follow) {
    unfollowUser({
      followerId: useUserStore().userInfo.id,
      followingId: props.userId,
    });
  } else {
    followUser({
      followerId: useUserStore().userInfo.id,
      followingId: props.userId,
    });
  }
  user.value.follow = !user.value.follow;
  ElMessage.success("操作成功");
};

getData();
</script>

<style lang="less" scoped>
.author {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  .avatar {
    margin-right: 10px;
  }
  .desc {
    .name {
      font-size: 18px;
    }
    .info {
      font-size: 14px;
      color: #969696;
    }
  }
  .follow {
    margin-left: auto;
    cursor: pointer;
    color: #ec6149;
    padding: 5px 10px;
    border: 1px solid #ec6149;
    border-radius: 5px;
    user-select: none;
  }
}
</style>
